<template>
    <div class="loginBody">
        <!-- <el-radio-group v-model="login">
            <el-radio-button label="login">登陆</el-radio-button>
            <el-radio-button label="register">注册</el-radio-button>
        </el-radio-group>-->
        <el-form :model="loginFrom" status-icon ref="loginFrom" label-width="70px" :rules="rules1">
            <el-form-item label="账号" prop="account">
                <el-input type="text" v-model.number="loginFrom.account"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model.number="loginFrom.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="exam">
                <el-input
                    type="password"
                    v-model="exam"
                    autocomplete="off"
                    placeholder="请输入验证码（区分大小写）"
                    @blur="blur"
                ></el-input>
                <canvas
                    id="canvas"
                    width="100"
                    height="38"
                    style="border: 1px solid #ccc;border-radius: 5px;"
                    @click="draw"
                ></canvas>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="sublim" style="width: 80%;">登陆</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
$(document).ready(function() {});
export default {
    props: ["from"],
    inject: ["reload"],
    data() {
        return {
            loginFrom: {
                account: "",
                password: ""
            },
            show_num: [],
            exam: "",
            rules1: {
                account: [
                    {
                        type: "number",
                        message: "请输入正确的账号格式（数字）",
                        trigger: "change"
                    },
                    {
                        type: "number",
                        message: "请输入正确的账号格式（数字）",
                        trigger: "blur"
                    },
                    {
                        required: true,
                        message: "请输入账号",
                        trigger: "blur"
                    }
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        sublim() {
            var val = this.exam;
            var num = this.show_num.join("");
            if (this.loginFrom.account && this.loginFrom.password) {
                if (val == "") {
                    this.$message({
                        showClose: true,
                        message: "请输入验证码！",
                        type: "warning"
                    });
                } else if (val == num) {
                    this.$message({
                        showClose: true,
                        message: "登陆成功！",
                        type: "success"
                    });
                    if (this.from) {
                        this.$router.push({
                            path: this.from
                        });
                        this.$global.updataUser("111");
                        this.reload();
                    } else {
                        this.$router.push({
                            path: "/home"
                        });
                        this.$global.updataUser("111");
                        this.reload();
                    }
                } else {
                    this.$message({
                        showClose: true,
                        message: "验证码错误！请重新输入！",
                        type: "error"
                    });
                    this.exam = "";
                    this.draw();
                }
            } else {
                this.$message({
                    showClose: true,
                    message: "请填写登陆信息",
                    type: "error"
                });
            }
        },
        draw() {
            var canvas_width = document.getElementById("canvas").clientWidth;
            var canvas_height = document.getElementById("canvas").clientHeight;
            var canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
            var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode =
                "1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
            var aCode = sCode.split(",");
            var aLength = aCode.length; //获取到数组的长度

            for (var i = 0; i <= 3; i++) {
                var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
                var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
                var txt = aCode[j]; //得到随机的一个内容
                this.show_num[i] = txt;
                var x = 10 + i * 20; //文字在canvas上的x坐标
                var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
                context.font = "bold 18px 微软雅黑";

                context.translate(x, y);
                context.rotate(deg);

                context.fillStyle = this.randomColor();
                context.fillText(txt, 0, 0);

                context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (var i = 0; i <= 5; i++) {
                //验证码上显示线条
                context.strokeStyle = this.randomColor();
                context.beginPath();
                context.moveTo(
                    Math.random() * canvas_width,
                    Math.random() * canvas_height
                );
                context.lineTo(
                    Math.random() * canvas_width,
                    Math.random() * canvas_height
                );
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) {
                //验证码上显示小点
                context.strokeStyle = this.randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        },
        randomColor() {
            //得到随机的颜色值
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        },
        blur() {
            var val = this.exam;
            var num = this.show_num.join("");
            if (val == "") {
                this.$message({
                    showClose: true,
                    message: "请输入验证码！",
                    type: "warning"
                });
            }
        }
    },
    mounted() {
        this.draw();
    }
};
</script>
<style>
div.loginBody div.el-form-item__content {
    display: flex;
}
</style>